<template>
    <div class="three-box" id="three-box"></div>
  </template>
  
  <script setup>
  import { Group } from "three";
  import { getCurrentInstance, onMounted, ref } from "vue";
  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
  const threeBox = ref();
  
  let { proxy } = getCurrentInstance();
  let THREE = proxy.$THREE;
  // const threeBox = ref();
  onMounted(() => {
    initThree();
  });
  
  const clock = new THREE.Clock();
  
  const initThree = () => {
    const threeBox = document.getElementById("three-box");
  
    const scene = new THREE.Scene();

    
    //添加平面
    const planeM = new THREE.MeshPhongMaterial({color: 0xeeeeee})
    const planeG = new THREE.PlaneGeometry(15,15);
    const planeMesh = new THREE.Mesh(planeG,planeM)
   
    planeMesh.rotation.y = 1.1*Math.PI
    planeMesh.rotation.x = 0.4*Math.PI

    planeMesh.position.y = -1.4
    planeMesh.receiveShadow = true
    // planeMesh.position.x = 0.5*Math.PI
    scene.add(planeMesh)
  
    //球
    const sphere = new THREE.SphereGeometry(0.3);
    const material = new THREE.MeshPhongMaterial({ 
      color: 0xff00ff
     });

     const nesh = new THREE.Mesh(sphere, material);
     nesh.position.y = 5.8
    //  nesh.position.y = 0.5
     nesh.position.x = 0.4
     nesh.castShadow = true
     scene.add(nesh);

     //正方体
    const box = new THREE.BoxGeometry(0.7,0.7,0.7);
    const boxmaterial = new THREE.MeshPhongMaterial({ 
      color: 0xff00ff
     });

     const boxnesh = new THREE.Mesh(box, boxmaterial);
     boxnesh.position.z = -1.6
     boxnesh.position.y = -0.7
    boxnesh.position.x = 0.8
     scene.add(boxnesh);

     //甜甜圈
     const tuor = new THREE.TorusGeometry(0.3,0.1,20,30);
    const tuormaterial = new THREE.MeshPhongMaterial({ 
      color: 0xff00ff
     });

     const tuornesh = new THREE.Mesh(tuor, tuormaterial);
     tuornesh.position.z = 1.5
     tuornesh.position.x = 0.5
     tuornesh.rotation.x = -Math.PI /2
     scene.add(tuornesh);


  //添加光源
    const aLight = new THREE.AmbientLight(0xffffff,0.2)
    // aLight.intensity = 0.2
    // aLight.position.set(1,1,1)
    scene.add(aLight)

    let dlight = new THREE.DirectionalLight(0xffffff)
    dlight.intensity = 0.8
    dlight.castShadow = true
    dlight.position.set(1.5,1.5,0.6)
    scene.add(dlight);



    const camera = new THREE.PerspectiveCamera(
      75,
      threeBox.clientWidth / threeBox.clientHeight,
      0.1,
      1000
    );

    camera.lookAt(0,0,0)
    camera.position.set(2, 2, 2);


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
    renderer.shadowMap.enabled = true
    threeBox.appendChild(renderer.domElement);
  
    const orbitControls = new OrbitControls(camera,renderer.domElement) //鼠标交互、左键移动场景、滚轮放大缩小、右键平移
  
    const clock = new THREE.Clock();

    function animate() {
      const time = clock.getElapsedTime();

        requestAnimationFrame(animate);
        orbitControls.update()

        nesh.position.y = Math.sin(time*1.5)

        boxnesh.rotation.x += 0.01;
        boxnesh.rotation.y += 0.01;

        tuornesh.rotation.x += 0.01;
        tuornesh.rotation.y += 0.01;

        renderer.render(scene, camera);
    }

    animate();
  };
  </script>
  
  <style>
  .three-box {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  </style>